import React, { Component } from 'react'
// Import Swiper React components
import "./yizis.scoped.less"
// Import Swiper styles
// import 'swiper/swiper.scss';
import {Spin} from "antd"
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { EffectCoverflow, Pagination } from 'swiper'
import "swiper/swiper.min.css";
import "swiper/components/effect-coverflow/effect-coverflow.min.css"
import "swiper/components/pagination/pagination.min.css"
import Loading from "../../../router/Loading"
SwiperCore.use([EffectCoverflow, Pagination]);
export default class Yizi extends Component {
  state={
    loading:true,
  }
  componentDidMount(){
    setTimeout(()=>{
      this.setState({
        loading:false
      })
    },500)
  }
  render() {
    return (
      <div>
        {/* <Spin className="gobalSpin" spinning={this.state.loading}>
        </Spin> */}
        <Loading spinning={this.state.loading}></Loading>
          {/* spaceBetween={50}
          slidesPerView={1.5} */}
          <Swiper
            initialSlide={2} //初始化slide的位置
            effect={'coverflow'}
            grabCursor={true}
            centeredSlides={true}
            slidesPerView={'1.16'} //屏幕显示的个数 
            coverflowEffect={{
              rotate: 0,
              stretch: -20,
              depth: 100,
              modifier: 2,
              slideShadows: false,

            }}
            pagination={true}
            className="mySwiper"
            onSlideChange={(e) => console.log('slide change', e)}
            onSwiper={(swiper) => console.log("swiper", swiper)}
          >
            <SwiperSlide>
              <div className="slideItem">item</div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="slideItem">item</div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="slideItem">item</div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="slideItem">item</div>
            </SwiperSlide>
          </Swiper>
            
      </div>
    )
  }
}
